<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>try</title> 
<script src="jquery-3.4.1.min.js"></script>
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="css/style.css" />

<style> 
@font-face
{
font-family: xingkai;
src: url('HYSuZeLiXingKaiTruingW.ttf'); /* IE9+ */
}

body,textarea
{
font-family:xingkai;
}
</style>

</head>

<body class="alert-danger">

	<center><img src="https://i.niupic.com/images/2019/10/18/_5.gif"  alt="学术家族树" /></center>
	<center><textarea id="text1" type="text" style="min-height:200px;min-width:1000px;max-height:200px;max-width:200px;" placeholder="请输入以[导师]开头的文本，[导师：]，[级博士生：]，[级硕士生：]，[级本科生：]和[\]当做关键词处理；若有多组输入，中间空一行"></textarea></center>
	<center><button>确定</button></center>


<script>
$(function(){	
	$("button").on('click',function(){
		//输入处理
   		var s =document.getElementById("text1").value;
		var reg = new RegExp("导师：","g");
		s.replace(reg,"导师：/");
		var reg = new RegExp("级博士生：","g");
		s.replace(reg,"级博士生：/");
		var reg = new RegExp("级硕士生：","g");
		s.replace(reg,"级硕士生：/");
		var reg = new RegExp("级本科生：","g");
		s.replace(reg,"级本科生：/");
		var reg = new RegExp(" ","g");
		s.replace(reg,"");
		var length=s.length;
		if (s[length-1].match(/\n|\r/g))
		alert("文本末不能有空行！");
		var reg = /\n(\n)*( )*(\n)*\n/g;
		s = s.replace(reg,"\n");
   		var ss = s.split(/、|\n|\r|：|\t|\ +/g); 
		console.log(ss);
		var num1=0;
		var num2=0;
		var num3=0;
		var num4=0;
		var num5=0;
		var tc=0;
		var i=0;
		if(ss[0]!="导师"){
			alert("请输入以导师开头的格式！");
		}
		else{
			//处理导师节点
		while(i<ss.length){

				for(;i<ss.length;i++){
					console.log(ss[i]);
					if(i==0){
						if(ss[i]=="导师"){
							$("#Tree").html('<li id="id4'+num4+'"><span  id="id5'+num5+'" class="badge badge-success"> 导师</span></li>');
							num4++;
							i++;
							$('#id5'+num5).after('<ul><li id="tc'+tc+'"><span id="teacher"> '+ss[i]+'</span></li></u1>');
							num5++;
						}
						else{
							break;
						} 
						console.log(ss[i]);
					}
					else{
						if(ss[i]=="导师"){
						$('#id4'+(num4-1)).after('<li id="id4'+num4+'"><span  id="id5'+num5+'" class="badge badge-success"> 导师</span></li>');
						num4++;
						i++;
						$('#id5'+num5).after('<ul><li id="tc'+tc+'"><span id="teacher"> '+ss[i]+'</span></li></u1>');
						num5++;
					}
					else{
						break;
					} 
					console.log(ss[i]);
					}
						
				}
		//处理其他节点
				while(i<ss.length){
					if(ss[i].match(/(([0-9]+)级博士生)|(([0-9]+)级硕士生)|(([0-9]+)级本科生)/)){
						$('#tc'+tc).after('<li><span id="id'+num1+'" class="badge badge-success"> </span></li>');

						$('#id'+num1).html(ss[i]);
						console.log(ss[i]);
						i++;
						var j=1;
							for(;i<ss.length;i++){
								console.log(ss[i]);
								if(ss[i].match(/(([0-9]+)级博士生)|(([0-9]+)级硕士生)|(([0-9]+)级本科生)|导师/)){
									i--;
									break;
								}
								if(j==1){
									$('#id'+num1).after('<ul><li id="id3'+num3+'"><span id="id2'+num2+'"> </span></li></u1>');
									j++;
								}
								else{
									$('#id3'+(num3-1)).after('<li id="id3'+num3+'"><span id="id2'+num2+'"> </span></li>');
								}
								$('#id2'+num2).html(ss[i]);
								num2=num2+1;
								num3=num3+1;
								console.log(ss[i]);
							}  
						num1=num1+1;
					}
					else{
						break;
					}
					
					i++;
					if(ss[i]=="导师"){
						break;
					}
					console.log(ss[i]);
				}
				tc++;
		}
		}
		
//折叠处理
		$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');

		$('.tree li.parent_li > span').on('click', function (e) {
			var children = $(this).parent('li.parent_li').find(' > ul > li');
	
			if (children.is(":visible")) {
				children.hide('fast');
				$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
    		} 
			else {
				children.show('fast');
				$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
			}
    		e.stopPropagation();
		});
		
	});
});
	


</script>

<div class="tree">

    <ul id="Tree"></ul>
    
</div>

</body>
</html>